<script lang="ts" setup>
import { ref, onMounted, defineProps, nextTick } from "vue";
const props = defineProps(["id", "list"])
//  按需引入 echarts
import * as echarts from "echarts";
onMounted(
    () => {
        nextTick(() => {
            let timer = setTimeout(() => {
                init()
                clearTimeout(timer)
            }, 800);
        })
    }
)
function init() {
    let dataX: any = []
    let dataY: any = []
    props.list.forEach((item: any) => {
        dataX.push(item.name)
        dataY.push(item.num)
    })
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById(props.id));
    // 指定图表的配置项和数据
    var option = {
        // legend: {
        //     data: ['销量']
        // },
        xAxis: {
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            }
        },
        tooltip: {
            trigger: "item",
        },
        color: [
            "#47A8F7",
            "#7F80E9",
            "#F3A33A",
            "#05C978",
            "#627EEB",
            "#FF6262",
            "#F44336",
            "#E91E63",
            "#9C27B0",
            "#673BB7",
            "#3F51B5",
            "#3F89B5",
            "#2196F3",
            "#03A9F4",
            "#00BCD4",
            "#03B0A0",
            "#4CAF51",
            "#8BC44B",
            "#CEDC39",
            "#FFE56A",
            "#FFC108",
            "#FF9900",
            "#FF5822",
            "#795549",
            "#A5A5A5",
            "#76848B",
            "#616161",
            "#E03D8A",
            "#9C91C2",
            "#113285",
            "#AEA142",
            "#60D595",
            "#C78550",
            "#BE2A2D",
            "#67BBB7",
            "#268885",
            "#B481BB",
            "#C2328E",
        ],
        yAxis: {
            data: dataX,
            type: "category",
            axisTick: {
                show: false // 不显示坐标轴刻度线
            },
            axisLine: {
                show: false, // 不显示坐标轴线
            },

        },
        grid: {
            left: 10,
            right: 10,
            bottom: 10,
            top: 10,
            containLabel: true,
        },
        series: [
            {
                name: '销量',
                type: 'bar',
                data: dataY,
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'right', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 16
                            }
                        }
                    }
                },
                barWidth: '15px',
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。

	 
    myChart.setOption(option);
}
</script>

<template>
    <div :id="props.id" style="width: 100%;height: 100%;"></div>
</template>

<style scoped></style>
